<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>grid布局</title>
</head>

<!-- 原始效果:https://jsbin.com/guvivum/edit?html,css,output -->

<body>
    <span>布局</span>
    <div class="div-body">
        <div class="div-item-1">1</div>
        <div class="div-item-2">2</div>
        <div class="div-item-3">3</div>
        <div class="div-item-4">4</div>
        <div class="div-item-5">5</div>
        <div class="div-item-6">6</div>
        <div class="div-item-7">7</div>
        <div class="div-item-8">8</div>
        <div class="div-item-9">9</div>
    </div>
    <span>布局结束</span>
</body>
</html>

<style>
    .div-body {
        /* 内联inline表示span和div不换行，否则竖排 */
        /*display: inline-grid;*/
        display: grid;
        /*grid-template-columns: 150px 150px 150px;
        grid-template-rows: 150px 150px 150px;*/

        /*grid-template-columns: repeat(3, 33.33%);
        grid-template-rows: repeat(3, 33.33%);*/
        
        grid-template-columns: repeat(3, 150px);
        grid-template-rows: repeat(3, 150px);

        /*grid-template-columns: repeat(auto-fill, 150px);*/

        /*grid-template-columns: 150px 1fr 2fr;*/
        /*grid-template-columns: 70%, 30%;*/

        /*grid-template-columns: repeat(12, 1fr);*/
        
        /*grid-row-gap: 20px;
        grid-column-gap: 20px;*/
        grid-gap: 20px 20px;
    }

    .div-item-1 {
        background-color: rgb(201, 138, 70);
    }

    .div-item-2 {
        background-color: rgb(38, 22, 53);
    }

    .div-item-3 {
        background-color: rgb(58, 162, 42);
    }

    .div-item-4 {
        background-color: rgb(58, 43, 73);
    }

    .div-item-5 {
        background-color: rgb(21, 51, 117);
    }

    .div-item-6 {
        background-color: rgb(215, 42, 19);
    }

    .div-item-7 {
        background-color: rgb(20, 199, 109);
    }

    .div-item-8 {
        background-color: rgb(131, 16, 108);
    }

    .div-item-9 {
        background-color: blueviolet;
    }
</style>